<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma"   content="no-cache" />   
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />   
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.draggable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.resizable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.fishflow-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/fishflow.css"></link>
<title>简单流图-工具栏操作</title>
<script language="javascript">
</script>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
</head>
<body>
<div id="dgxDemo"></div>
</body>
</html>

<script language="javascript">
var wfg = new fishflow({
	title : "FISHFLOW案例",
	renderTo : $("#dgxDemo"),
	width:800,
	height:600,
	editable:true,
	canvasAutoFixSize:true,
	toolBox : ["pointer","direct","line","node","start","end"],
	data:{
		//工具箱按钮
		//节点
		nodes:[
			{id:"startNode",name : "开始"          ,type : "start"    ,left : 20  ,top : 205 ,width : 25   ,height : 25},
			{id:"unit1"    ,name : "流程节点1"     ,type : "node"     ,left : 120 ,top : 200 ,width : 120  ,height : 40},
			{id:"unit2"    ,name : "流程节点2"     ,type : "node"     ,left : 320 ,top : 200 ,width : 120  ,height : 40},
			{id:"unit3"    ,name : "流程节点3"     ,type : "complex"  ,left : 520 ,top : 200 ,width : 120  ,height : 40},
			{id:"endNode"  ,name : "结束"          ,type : "end"      ,left : 720 ,top :204  ,width : 25   ,height : 25}
		],
		//连接线
		lines:[
			{id:"demo_line_1",from : "startNode"  ,to : "unit1"   ,type : "linkLine" },
			{id:"demo_line_2",from : "unit1"      ,to : "unit2"   ,type : "linkLine" },
			{id:"demo_line_3",from : "unit2"      ,to : "unit3"   ,type : "linkLine" },
			{id:"demo_line_4",from : "unit3"      ,to : "endNode" ,type : "linkLine" }
		]
	},
	headerToolBar:{
		"save":function(){
			alert(0);
		},
		"delete":function(){
			var selectedElenet = wfg.getSelectedElement();
			if(selectedElenet&&selectedElenet.id){
				wfg.removeElement(selectedElenet.id);
			}
		},
		"line":null
	}
});

$(document).ready(function(){
});

</script>